<template>
	<!-- 导航 -->
	<div id="nav_common" class="flex">
		<div class="navBox">
			<div class="website" @click="home">
				<a :href="homePage" @click="swichTab('')">
					<img :src="src" alt="" srcset="" />
				</a>
				<!-- <span class="logo">JEECMS</span>
				<span class="name">演示站</span> -->
			</div>
			<div class="navTitle">
				<a v-for="item in list" class="navName " :class="columnPath.includes(item.url)? 'mhover' : ''" @click="swichTab(item.id)" :href="Path + item.url">{{ item.channelName }}</a>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['sss', 'closeWZAChange'],
	data() {
		return {
			src: 'https://demo.jeecms.com/u/cms/www/2023/06/30/1674779022510346243.png',
			list: [],
			url: '',
			activeChannel: '',
			Path: getRootPath(),
			homePage:location.origin,
			columnPath:'',
			close:false,
		};
	},
	watch: {
		closeWZAChange: {
			handler(newVal, oldVal) {
				if (newVal && newVal!='false') {
						// this.$nextTick(()=>{
						// 	let ele = document.querySelector('#nav_common');
						// 	ele.style.top = '90px'
						// })
					}
				}
			//immediate: true
		},
	},
	created() {
		this.url = window.location.href.split('frontjeecmsx2')[0];
		this.getHeaderList();
		this.columnPath = window.location.href;
		this.close = localStorage.close!='false';
	},
	mounted(){
		// this.$nextTick(()=>{
		// 	let ele = document.querySelector('#nav_common');
		// 	let closeWZA = localStorage.close;
		// 	if(closeWZA == 'false' || !closeWZA){
		// 		ele.style.top = '40px'
		// 	}
		// })
	},
	methods: {
		swichTab(id) {
			this.activeChannel = id;
			//window.sessionStorage.tabId = id;
		},
		home() {
			window.location.href = this.url + 'frontjeecmsx2/src/index.html?';
		},
		getHeaderList() {
			// 栏目导航只取5个
			homeApi.HeaderChannellist({ count: 5 }, res => {
				if (res.code == '00000 00000') {
					this.list = res.data;
				} else {
				}
			});
		}
	}
};
</script>

<style>
#nav_common {
	width: 100%;

	height: 70px;
	background: #ffffff;
	box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);

	opacity: 1;
}
.navBox {
	width: 1200px;
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
}
.website {
	margin-right: 8px;
	display: flex;
	align-items: center;
}
.website .logo {
	/* width: 130px; */
	font-size: 28px;
	font-weight: 800;
	/* height: 24px; */
	color: #ff3333;
	font-style: italic;
}
.website .name {
	margin-left: 4px;
	height: 24px;
	font-size: 24px;
	font-weight: 600;
	color: #333333;
	line-height: 24px;
}
.navTitle .navName {
	margin-left: 48px;
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	line-height: 16px;
}
.navTitle .mhover {
	color: #ff3333;
}
</style>
